.breadcrumb,
.breadcrumb a {
  height: 33px;
  display: inline-block;
}

.breadcrumb { 
  margin: 0;
  padding: 0;
  border-radius: 3px;
  border-width: 1px;
  border-style: solid;
  overflow: hidden;
}
		.breadcrumb a {
      text-rendering: optimizeLegibility;
      line-height: 33px;
    	font-size: 12px;
      font-weight: 300;
			text-decoration: none;
      padding: 0 10px 0 20px;
			position: relative;
		}
		.breadcrumb a:first-child {
		  padding-left: 16px;
		}
    .breadcrumb a:last-child,
    .breadcrumb input[type=text] {
      padding-right: 16px;
    }
		.breadcrumb a:after,
    .breadcrumb a:before { 
			content: ''; 
			display: block; 
			width: 0; 
			height: 0;
			border-top: 17px solid transparent;
			border-bottom: 17px solid transparent;
  /* make left half the height */
      border-left: 10px solid transparent;
			position: absolute;
      margin: auto;
			top: 0;
      bottom: 0;
			left: 100%;
			z-index: 2;
		}
		.breadcrumb a:before { 
      margin-left: 1px;
			z-index: 1;
		}

		.breadcrumb a:last-child {
      color: #fff;
		}

    .breadcrumb a:last-child {
			pointer-events: none;
			cursor: default;
		}
		.breadcrumb a:last-child:after,
    .breadcrumb a:last-child:before,
    .breadcrumb input[type=text] {
		   border: none;
    }
    .breadcrumb input[type=text] {
      -webkit-appearance: none;
      display: inline-block;
      text-indent: 24px;
      padding: 0 16px;
      height: 33px;
      width: 10px;
      outline: 1px solid transparent;
      background-origin: content-box;
      background-position: left 50%;
      background-repeat: no-repeat;
      background-size: 15px 15px;
      transition-property: all;
      transition-duration: .13s;
      transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
    }
    .breadcrumb input[type=text]:hover,
    .breadcrumb input[type=text]:focus {
      width: 100px;
    }

/* DARK COLORS */
.dark .breadcrumb {
  border-color: #2E3031;
}
  .dark .breadcrumb a {
    color: #c6c6c6;
    background-color: #595B5B;
    text-shadow: 0 -1px rgba(0,0,0,.7);
    box-shadow: inset 0 1px 0 #727373;
  } 
    .dark .breadcrumb a:after {
      border-left-color: #595B5B;
    }
		.dark .breadcrumb a:before { 
			border-left-color: #2E3031;
		}
		.dark .breadcrumb a:hover {
		   background: #646666;
    }
		.dark .breadcrumb a:hover:after {
		  border-left-color: #646666;
    }
    .dark .breadcrumb a:active:before {
      border-left-color: #404141;
    }

    .dark .breadcrumb a:last-child,
    .dark .breadcrumb input[type=text] {
      background-color: #404141;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    }
    .dark .breadcrumb input[type=text] {
      color: #c6c6c6;
      background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49364/search-light.svg);
    }


/* LIGHT COLORS */
.light .breadcrumb {
  border-color: #9C9E9E;
}
  .light .breadcrumb a {
    color: #454545;
    background-color: #e5e9e9;
    text-shadow: 0 -1px rgba(255,255,255,.7);
    box-shadow: inset 0 1px 0 #fff;
  } 
    .light .breadcrumb a:after {
      border-left-color: #e5e9e9;
    }
		.light .breadcrumb a:before { 
			border-left-color: #9C9E9E;
		}
		.light .breadcrumb a:hover {
		   background: #EDF1F1;
    }
		.light .breadcrumb a:hover:after {
		  border-left-color: #EDF1F1;
    }
    .light .breadcrumb a:last-child,
    .light .breadcrumb input[type=text] {
      background-color: #d3d7d7;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    }

    .light .breadcrumb input[type=text] {
      color: #454545;
      background-color: #D3D7D7;
      border: 0;
      background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49364/search-dark.svg);
    }

    .breadcrumb input[type=text]:focus {
      outline-color: #0026FF;
      background-color: #fff;
      box-shadow:
        inset 0 0 0 2px #6CB4F3,
        inset 0 1px 2px rgba(0,0,0,.4);
    }